<template>
	<div>
		<el-breadcrumb separator="/" class="ml_5">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-seller fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>B端</el-breadcrumb-item>
			<el-breadcrumb-item>商机客户</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15">
			<div>
				<div class="headerBox">基本信息</div>
				<div class="contentInfo">
					<div class="pt_10">
						<div class="row-info clear">
							<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>店铺名称</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes.name" placeholder="请输入"></el-input>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>店铺位置</div>
							<div class="fl list-cont">
								<!-- <el-input v-model="dataMes.address" disabled></el-input> -->
								<el-input :value="lng + ',' + lat" disabled></el-input>
							</div>
							<i class="lhadmin lhadmin-dingwei dingwei ml_5" @click="redactBtn"></i>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">详细地址</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes.detailed_address"></el-input>
							</div>
							<div class="fl title-key" style="width: 200px; text-align: left; margin-left: 10px; color: red;">
								转合作时必填
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">代理商</div>
							<div class="fl list-cont">
								<el-select v-model="dataMes.agent_id" @change="getBusinessUser()">
									<el-option
										:label="item.name"
										:value="item.id"
										v-for="(item, index) in agentList"
										:key="index"
									></el-option>
								</el-select>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">所在商圈</div>
							<div class="fl list-cont contentInfo2">
								<el-input v-model="dataMes.city_name" disabled></el-input>
							</div>
							<div class="fl list-cont contentInfo2">
								<el-input v-model="dataMes.area_name" disabled></el-input>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>联系人</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes.contact" placeholder="请输入"></el-input>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>联系方式</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes.contact_phone" placeholder="请输入"></el-input>
							</div>
							<div class="fl title-key" style="width: 600px; text-align: left; margin-left: 10px;">
								(联系人与联系方式只用于信息记录，不再生成登录账号，创建账号请前往【商户账号管理】页面)
							</div>
						</div>
						<!-- <div class="row-info clear">
							<div class="fl title-key">负责人手机号</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes.contact_phone" placeholder="请输入"></el-input>
							</div>
							<div class="fl title-key" style="width: 200px; text-align: left; margin-left: 10px; color: red;">
								转合作时必填
							</div>
						</div> -->
						<div class="row-info clear" v-if="hideIndustry">
							<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>所属行业</div>
							<div class="fl list-cont">
								<el-select v-model="dataMes.industry">
									<!-- <el-option label="餐饮" value="1"></el-option> -->
									<el-option
										v-for="(item, index) in industryJobList"
										:key="index"
										:label="item.label_name"
										:value="item.id"
									></el-option>
								</el-select>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>客户来源</div>
							<div class="fl list-cont">
								<el-select v-model="dataMes.origin">
									<el-option label="其他" value="1"></el-option>
									<el-option label="商户" value="2"></el-option>
									<el-option label="BD" value="3"></el-option>
									<el-option label="高德地图" value="4"></el-option>
									<el-option label="美团点评" value="5"></el-option>
									<el-option label="口碑" value="6"></el-option>
								</el-select>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">商机状态</div>
							<div class="fl list-cont">
								<el-select v-model="dataMes.opportunity_status">
									<el-option label="待跟进" value="1"></el-option>
									<el-option label="有意向" value="2"></el-option>
									<el-option label="无意向" value="3"></el-option>
									<el-option label="无效商机" value="4"></el-option>
								</el-select>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">员工人数</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes.emp_num" placeholder="请输入"></el-input>
							</div>
							<div class="fl title-key" style="width: 200px; text-align: left; margin-left: 10px; color: red;">
								转合作时必填
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">桌台数</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes.number_sets" placeholder="请输入"></el-input>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">人均消费</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes.consumption_person" placeholder="请输入"></el-input>
							</div>
							<div class="fl title-key" style="width: 200px; text-align: left; margin-left: 10px;">
								元/人
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">用工高峰时段</div>
							<div class="fl list-cont">
								<el-select v-model="dataMes.time_interval">
									<el-option label="早班 [05:00-09:59]" value="1"></el-option>
									<el-option label="中班 [10:00-14:59]" value="2"></el-option>
									<el-option label="晚班 [15:00-21:59]" value="3"></el-option>
									<el-option label="夜班 [22:00-次日04:59]" value="4"></el-option>
								</el-select>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">营业时间</div>
							<div class="fl list-cont">
								<el-form label-width="100" class="demo-ruleForm fl">
									<el-form-item required style="margin-bottom: 0px;">
										<el-col :span="11">
											<el-time-select
												v-model="dataMes.start_time"
												:picker-options="{
													start: '00:00',
													step: '00:30',
													end: '24:00'
												}"
												placeholder="开始时间"
											></el-time-select>
										</el-col>
										<el-col class="line" :span="2" style="position: relative; right: -10px;">~</el-col>
										<el-col :span="11">
											<el-time-select
												v-model="dataMes.end_time"
												:picker-options="{
													start: '00:00',
													step: '00:30',
													end: '24:00'
												}"
												placeholder="开始时间"
											></el-time-select>
										</el-col>
									</el-form-item>
								</el-form>
							</div>
						</div>

						<div class="row-info clear">
							<div class="fl title-key">负责人邮箱</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes.email" placeholder="请输入"></el-input>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">公司网址</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes.company_website" placeholder="请输入"></el-input>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">销售</div>
							<div class="fl list-cont">
								<el-autocomplete
									class="inline-input"
									v-model="dataMes.bd_name"
									:fetch-suggestions="querySearch"
									placeholder="请输入内容"
									:trigger-on-focus="true"
									@select="handleSelect"
								></el-autocomplete>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">联系电话</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes.business_phone" placeholder="请输入" disabled></el-input>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">备注</div>
							<div class="fl list-cont">
								<el-input
									type="textarea"
									:rows="8"
									:cols="44"
									placeholder="请输入内容"
									v-model="dataMes.remark"
								></el-input>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key mt_15">营业执照</div>
							<div class="fl list-cont">
								<uploadedit
									:pic_name="'business_license'"
									:pic_url="dataMes.business_license"
									@func="img1"
								></uploadedit>
							</div>
							<div class="fl title-key" style="width: 200px; text-align: left; margin-left: 10px; color: red;">
								转合作时必填
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">公司名称</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes.company_name" placeholder="请输入"></el-input>
							</div>
							<div class="fl title-key" style="width: 200px; text-align: left; margin-left: 10px; color: red;">
								转合作时必填
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">营业执照注册号</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes.registration_no" placeholder="请输入"></el-input>
							</div>
							<div class="fl title-key" style="width: 120px; text-align: left; margin-left: 10px;">
								（统一社会信用代码）
							</div>
							<div class="fl title-key" style="width: 200px; text-align: left; margin-left: 10px; color: red;">
								转合作时必填
							</div>
						</div>
					</div>
					<div class="clear"></div>
					<div class="ml_120 mt_80">
						<span class="resetBtn mr_10" @click="back">返 回</span>
						<span class="btnOK" @click="addCompanyBtn">保 存</span>
					</div>
				</div>
			</div>
		</div>
		<!-- 弹出地图 -->
		<!-- 在地图上标记店铺位置 -->
		<el-dialog
			title="在地图上标记店铺位置"
			:visible.sync="readctRoleShow"
			width="1000px"
			:before-close="close"
			:close-on-click-modal="false"
		>
			<div class="auditCentent">
				<div class="clear">
					<div class="mb_10 roleFunctionBox">
						<div class="pl_10 pb_10">
							<!-- 区域画图 -->
							<!-- <maparea @func="getMsgFormSon" ref="mychildarea" v-if="readctRoleShow"></maparea> -->
							<!-- <areapicking v-if="readctRoleShow" @pagedata="onChildValue"></areapicking> -->
							<areapickings
								v-if="readctRoleShow"
								@pagedata="onChildValue"
								:inputs="dataMes.name"
								:lngs="lng"
								:lats="lat"
								:areas="dataMes.address"
							></areapickings>
						</div>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { mainfun } from '../../../assets/js/main.js'
import { publicData } from '../../../assets/js/data.js'
import { fetchIndustryJob } from '@/api/label.js'
import { searchAgentList } from '@/api/agent.js'
import { fetchCityArea, createCity } from '@/api/city.js'

export default {
	name: 'AddCompany',
	data() {
		return {
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			url: common.url,
			readctRoleShow: false, //区域框架的显示隐藏
			//相关数据
			dataMes: {
				name: '', //店铺名称
				address: '', //地址
				detailed_address: '', //地址
				city_id: '', //城市ID
				city_name: '', //城市
				area_id: '', //区域id
				area_name: '', //区域
				contact: '', //联系人
				// contact_phone: '', //负责人手机号
				contact_phone: '', //联系方式
				industry: '', //所属行业 [1]餐饮
				origin: '', //客户来源
				opportunity_status: '', //商机状态
				emp_num: '', //员工人数
				number_sets: '', //桌台数
				consumption_person: '', //人均消费
				time_interval: '', //高峰时段 1、2、3、4早、中、晚、夜
				start_time: '', //营业时间-开始
				end_time: '', //营业时间-结束
				email: '', //负责人邮箱
				company_website: '', //网址
				bd_name: '', //销售
				bd_userid: '', //销售ID
				business_phone: '', //联系电话
				remark: '', //备注
				business_license: '', //营业执照
				company_name: '', //公司名称
				registration_no: '', //信用代码
				coordinates_list: {}, //新增的位置坐标
				agent_id: ''
			},
			BusinessUserList: [], //销售列表
			city_arr: '',
			lng: '', //经度
			lat: '', //纬度
			industryJobList: [],
			agentList: [],
			hideIndustry: false
		}
	},
	watch: {
		// 监听城市
		lng(val) {
			if (val) {
				this.hideIndustry = true
				this.dataMes.industry = ''
				this.getIndustryJob()
			}
		}
	},
	created() {
		if (this.$route.query.shop_id) {
			//调取店铺详情接口
			this.getshopinfo()
		}
	},
	mounted() {
		this.getList() //代理商列表
		this.getBusinessUser()
	},
	methods: {
		//获取总的信息
		getshopinfo() {
			let fn = new FormData()
			fn.append('id', this.$route.query.shop_id)
			this.$http.post(this.url + '/shop/info', fn).then(
				res => {
					console.log(res.data.data)
					if (res.data.msg == '查询成功!' || res.data.code == '200') {
						if (res.data.data != null) {
							var allmes = res.data.data
							this.dataMes.name = allmes.shop_name //店铺名称
							this.dataMes.address = allmes.address //地址
							this.dataMes.detailed_address = allmes.detailed_address //地址
							this.dataMes.city_id = allmes.city_id //城市ID
							this.dataMes.city_name = allmes.city_name //城市
							this.dataMes.area_id = allmes.area_id //区域ID
							this.dataMes.area_name = allmes.area_name //区域
							this.dataMes.contact = allmes.contact //店铺负责人
							// this.dataMes.contact_phone = allmes.contact_phone //店铺负责人手机号
							this.dataMes.contact_phone = allmes.contact_phone //联系方式
							this.dataMes.industry = allmes.industry_id //所属行业 [1]餐饮
							this.dataMes.origin = allmes.origin_customer.toString() //客户来源
							this.dataMes.opportunity_status = allmes.opportunity_status.toString() //商机状态
							this.dataMes.emp_num = allmes.emp_num //员工人数
							this.dataMes.number_sets = allmes.number_sets //桌台数
							this.dataMes.consumption_person = allmes.consumption_person //人均消费
							this.dataMes.time_interval = allmes.time_interval.toString() //高峰时段 1、2、3、4早、中、晚、夜
							this.dataMes.start_time = allmes.start_time //营业时间-开始
							this.dataMes.end_time = allmes.end_time //营业时间-结束
							this.dataMes.email = allmes.email //负责人邮箱
							this.dataMes.company_website = allmes.company_website //网址
							this.dataMes.bd_name = allmes.business_director //销售
							this.dataMes.bd_userid = allmes.business_director_id //销售ID
							this.dataMes.business_phone = allmes.business_phone //联系电话
							this.dataMes.remark = allmes.remark //备注
							this.dataMes.business_license = allmes.business_license //营业执照
							this.dataMes.company_name = allmes.company_name //公司名称
							this.dataMes.registration_no = allmes.registration_no //信用代码
							this.dataMes.coordinates_list = allmes.location //坐标位置
							this.dataMes.agent_id = +allmes.agent_id

							//相关经纬度信息的返回
							this.lat = allmes.lat
							this.lng = allmes.lng
							this.getIndustryJob(allmes.industry_id)
							this.getBusinessUser() //销售列表
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		//获取销售列表
		getBusinessUser() {
			let fn = new FormData()
			fn.append('agent_id', this.dataMes.agent_id)
			this.$http.post(this.url + '/manageUser/getBusinessUser', fn).then(
				res => {
					// console.log(res.data.data);
					if (res.data.msg == '查询成功!' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.forEach(item => {
								item.value = item.nickname
							})
							this.BusinessUserList = res.data.data
						} else {
							this.BusinessUserList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		//子组件过来的值
		async onChildValue(item) {
			try {
				this.lng = item[0]
				this.lat = item[1]
				this.dataMes.address = item[2]

				let ret = await fetchCityArea({ lng: this.lng, lat: this.lat, source: 'shop' })
				if (ret) {
					this.dataMes.city_id = ret.city_id
					this.dataMes.city_name = ret.city_name
					this.dataMes.area_id = ret.id
					this.dataMes.area_name = ret.area_name
					this.dataMes.coordinates_list = ret.coordinates_list
					this.getIndustryJob()
				} else {
					this.dataMes.city_id = ''
					this.dataMes.city_name = ''
					this.dataMes.area_id = ''
					this.dataMes.area_name = ''
					this.dataMes.coordinates_list = {}
					this.industryJobList = []
					this.dataMes.industry = ''
					this.createCityFunction()
				}
			} catch (err) {
				console.log(err)
			} finally {
				this.close()
			}
		},

		async createCityFunction() {
			try {
				let ret = await createCity({ lng: this.lng, lat: this.lat })
				this.dataMes.city_id = ret.city_id
				this.dataMes.city_name = ret.city_name
				this.getIndustryJob()
			} catch (err) {
				console.log(err)
			}
		},

		redactBtn(row) {
			//编辑
			this.readctRoleShow = true //显示区域框
		},

		close() {
			this.readctRoleShow = false //隐藏区域框
		},
		addCompanyBtn() {
			//提交表单数据
			if (
				this.dataMes.name == '' || //店铺名称
				// this.dataMes.address == '' || //地址
				this.dataMes.contact == '' || //联系人
				this.dataMes.contact_phone == '' || //联系方式
				this.dataMes.origin == '' || //客户来源
				this.dataMes.industry == '' //行业
			) {
				this.$message.error('请填写必填项')
				return
			}
			//判断销售是否存在 this.dataMes.bd_name
			if (this.dataMes.bd_name) {
				var existence = false //默认不存在
				this.BusinessUserList.forEach(item => {
					if (this.dataMes.bd_name == item.nickname) {
						existence = true
					}
				})
				if (existence == false) {
					this.$message.error('请选择正确的销售')
					return
				}
			}

			// 新增的方法
			this.first()
		},
		first() {
			let fn = new FormData()
			if (this.$route.query.shop_id) {
				fn.append('id', this.$route.query.shop_id)
			}
			fn.append('type', 1)
			fn.append('business_id', '580')
			fn.append('business_sn', 'E0010000580')
			fn.append('name', this.dataMes.name)
			// fn.append('address', this.dataMes.address)
			fn.append('address', '')
			fn.append('detailed_address', this.dataMes.detailed_address)
			if (this.dataMes.city_id == '') {
				this.dataMes.city_id = 1
				this.dataMes.city_name = '北京'
			}
			fn.append('city_id', this.dataMes.city_id)
			fn.append('city_name', this.dataMes.city_name)
			fn.append('area_id', this.dataMes.area_id)
			fn.append('area_name', this.dataMes.area_name)
			fn.append('contact', this.dataMes.contact)
			// fn.append('contact_phone', this.dataMes.contact_phone)
			fn.append('contact_phone', this.dataMes.contact_phone) //联系方式
			fn.append('industry', this.dataMes.industry)
			fn.append('origin_customer', this.dataMes.origin) //客户来源
			fn.append('opportunity_status', this.dataMes.opportunity_status) //商机状态
			fn.append('emp_num', this.dataMes.emp_num)
			fn.append('number_sets', this.dataMes.number_sets)
			fn.append('consumption_person', this.dataMes.consumption_person)
			fn.append('time_interval', this.dataMes.time_interval)
			fn.append('start_time', this.dataMes.start_time)
			fn.append('end_time', this.dataMes.end_time)
			fn.append('email', this.dataMes.email)
			fn.append('company_website', this.dataMes.company_website)
			fn.append('business_director', this.dataMes.bd_name)
			fn.append('business_director_id', this.dataMes.bd_userid)
			fn.append('business_phone', this.dataMes.business_phone)
			fn.append('remark', this.dataMes.remark)
			fn.append('business_license', this.dataMes.business_license)
			fn.append('company_name', this.dataMes.company_name)
			fn.append('registration_no', this.dataMes.registration_no)
			fn.append('agent_id', this.dataMes.agent_id)

			fn.append('lng', this.lng)
			fn.append('lat', this.lat)

			this.$http.post(this.url + '/shop/addBasic', fn).then(
				res => {
					// console.log(res);
					if (res.data.msg == '请求成功' || res.data.code == '200') {
						this.$message.success(res.data.msg)
						this.$router.go(-1)
						// this.returnBtn() //返回顶部
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		returnBtn() {
			//回到顶部
			$('html,body').animate({ scrollTop: 0 }, 5)
		},
		back() {
			//返回
			this.$router.go(-1)
		},
		//自动完成=销售
		querySearch(queryString, cb) {
			var restaurants = this.BusinessUserList
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect(item) {
			this.dataMes.bd_name = item.nickname
			this.dataMes.bd_userid = item.user_id
			this.dataMes.business_phone = item.mobile
		},
		img1(data) {
			this.dataMes.business_license = data
		},
		async getIndustryJob(id) {
			try {
				let ret = await fetchIndustryJob({
					city_id: this.dataMes.city_id
				})
				if (ret.length > 0) {
					this.industryJobList = ret
					if (id) {
						this.dataMes.industry = id
					}
				} else {
					this.industryJobList = []
				}
			} catch (err) {
				console.log(err)
			}
		},
		async getList() {
			try {
				let ret = await searchAgentList({ status: 1 })
				this.agentList = ret.list.map(it => {
					return {
						id: it.id,
						name: it.name,
						value: it.name,
						city_list: it.city_list
					}
				})
			} catch (err) {
				console.log(err)
			}
		}
	}
}
</script>

<style scoped>
.AddCompany {
	margin: 15px 15px 0 15px;
}
.headerBox {
	height: 35px;
	line-height: 35px;
	font-size: 16px;
	font-weight: bold;
	padding-left: 10px;
	border-bottom: 1px solid #e8e8e8;
}
.searchLine {
	height: 60px;
}
.contentInfo {
	padding: 10px;
}
.contentInfo ul li {
	min-height: 50px;
	line-height: 50px;
	margin: 5px 0;
}
.ivoniceListBox > span {
	color: #666666;
	font-size: 14px;
	text-align: right;
	display: inline-block;
	width: 140px;
}
.contentInfo ul li > span {
	float: left;
	color: #666666;
	font-size: 12px;
	text-align: right;
	display: inline-block;
	width: 140px;
}
.contentInfo ul li p {
	float: left;
	padding-left: 10px;
	color: #333333;
	font-size: 16px;
	display: inline-block;
}
.contentInfo ul li.addr {
	min-height: 120px;
}
.fontStepF {
	font-family: 'Impact', sans-serif;
	font-weight: 900;
	font-style: normal;
	margin-right: 5px;
	font-size: 60px;
}
.submitBox {
	margin: 30px 0 0 150px;
	height: 50px;
}
.submitBox .btnOK {
	padding: 0 40px;
}
.contentInfo .hintSelect {
	color: #999999;
	font-size: 12px;
	letter-spacing: 1px;
}
.upLodeImgBox {
	/* height: 150px; */
	min-height: 140px !important;
}
.upLodeImgBox img {
	padding: 4px;
	border: 2px solid #cccccc;
	height: 90px;
}
.uploaderBtn {
	width: 300px;
	height: 30px;
	line-height: 30px;
	background: var(--gray);
	color: #ffffff;
	border-radius: 15px;
}
.dingwei {
	font-size: 26px;
	color: var(--btn);
}
.avatar {
	ght: 110px;
	vertical-align: text-top;
}
.step {
	color: #999999;
}
.stepRed {
	color: var(--red3);
}
.stepGreen {
	color: var(--green);
}
.stepBlack {
	color: var(--black);
}
.step01 .font_Box {
	width: 30%;
	text-align: right;
}
.step02 .font_Box,
.step03 .font_Box {
	width: 20%;
	text-align: right;
}
.step01 .cont_Box {
	width: 70%;
}
.step02 .cont_Box,
.step03 .cont_Box {
	width: 50%;
}
.cont_Box > div {
	padding: 10px 0 10px 5px;
}
.cont_Box h3 {
	line-height: 36px;
}
.cont_Box p {
	font-size: 13px;
}
.step .hintDian1,
.step .hintDian2 {
	width: 30%; /* text-align: center; */
	line-height: 90px;
}
.hintDian1 span:nth-child(1),
.hintDian1 span:nth-child(3),
.hintDian2 span:nth-child(1),
.hintDian2 span:nth-child(3) {
	font-size: 14px;
}
.hintDian1 span:nth-child(2),
.hintDian2 span:nth-child(2) {
	font-size: 20px;
	position: relative;
	top: 2px;
}
.row-info {
	padding: 10px 0;
}
.title-key {
	width: 108px;
}
/* 步骤一 */
.stepOne {
	play: -webkit-flex;
	display: flex;
	-webkit-justify-content: left;
	justify-content: left;
}
.stepThree {
	background-color: #ffffff;
	border-radius: 5px;
	margin-top: 15px;
}
@media (max-width: 767.78px) {
	.contentInfo ul li > span {
		width: 80px !important;
		font-size: 10px !important;
	}
	.contentInfo .hintSelect {
		display: none !important;
	}
	.contentInfo ul li p {
		font-size: 14px;
	}
	.ivoniceListBox > span {
		width: 80px !important;
		font-size: 10px !important;
	}
	.companyPopulation {
		width: 200px;
	}
	.uploaderBtn {
		th: 200px;
	}
}

@media (max-width: 1200.78px) {
	.fontStepF {
		font-size: 40px;
	}
	.cont_Box > div {
		padding: 0;
	}
	.cont_Box h3 {
		line-height: 30px;
		font-size: 15px;
	}
	.cont_Box p {
		font-size: 12px;
	}
	.step .hintDian1,
	.step .hintDian2 {
		line-height: 50px;
	}
	.step_BOX {
		height: 60px;
	}
}

/* 上传 */
</style>



// WEBPACK FOOTER //
// src/components/shop/OpportunityAdd.vue